<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增用户')" />
    <th:block th:include="include :: select2-css" />
</head>
<style>
    .threep{

        border: 1px solid #ddd;
        border-radius: 4px;
        background: transparent;
        outline: none;
        height: 30px;
        width: 200px;

    }
</style>
<body>
<div class="main-content">
    <form id="form-user-add" class="form-horizontal">
        <input name="deptId" type="hidden" id="treeId"/>
        <h4 class="form-header h4">基本信息</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">用户名称：</label>
                    <div class="col-sm-8">
                        <input name="trueName" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">手机号码：</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input id="uPhone" name="uPhone" placeholder="请输入手机号码" class="form-control" type="text" maxlength="11">
                            <span class="input-group-addon"><i class="fa fa-mobile"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">登录账号：</label>
                    <div class="col-sm-8">
                        <input id="loginName" name="loginName" placeholder="请输入登录账号" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">登录密码：</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input id="loginPawd" name="loginPawd" placeholder="请输入登录密码" class="form-control" type="password" th:value="${@config.getKey('sys.user.initPassword')}" required>
                            <span class="input-group-addon" title="登录密码,鼠标按下显示密码"
                                  onmousedown="$('#loginPawd').attr('type','text')"
                                  onmouseup="$('#loginPawd').attr('type','password')"><i class="fa fa-key"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">用户状态：</label>
                    <div class="col-sm-8">
                        <label class="toggle-switch switch-solid">
                            <input type="checkbox" id="u_Status" name="u_Status" checked>
                            <span></span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">过期时间：</label>
                    <div class="col-sm-8">
                        <input type="date" class="form-control" id="over_date" name="over_date" >
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12" >
                <div class="form-group" >
                    <label class="col-xs-2 control-label">角    色：</label>
                        <span style="width: 80px"  >
                            <select id="srSelect" name="srSelect" class="threep" >
                                <option value="" label="--请选择--"></option>
                                <option th:each="role:${roles}" th:value="${role.srId}" th:text="*{role.srTitle}" ></option>
                            </select>
                        </span>
                </div>
            </div>
        </div>
        <div class="row" id="institution" >
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-xs-2 control-label">选择机构：</label>
                    <span style="width: 80px"  >
                        <select id="institutionSelect" name="institutionSelect" class="threep">
                            <option value="" label="--请选择--"></option>
                            <option th:each="institution:${institutions}" th:value="${institution.itId}" th:text="*{institution.itName}" ></option>
                        </select>
                    </span>
                </div>
            </div>
        </div>
    </form>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
<script>
    var prefix = ctx + "system/user";

    $("#form-user-add").validate({
        onkeyup: false,
        rules:{
            loginName:{
                minlength: 2,
                maxlength: 20,
                remote: {
                    url: prefix + "/checkLoginNameUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                        "loginName": function() {
                            return $.common.trim($("#loginName").val());
                        }
                    },
                    dataFilter: function(data, type) {
                        return $.validate.unique(data);
                    }
                }
            },
            password:{
                minlength: 5,
                maxlength: 20
            },
            uPhone:{
                isPhone:true,
                remote: {
                    url: prefix + "/checkPhoneUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                        "uPhone": function () {
                            return $.common.trim($("#uPhone").val());
                        }
                    },
                    dataFilter: function (data, type) {
                        return $.validate.unique(data);
                    }
                }
            },
        },
        messages: {
            "loginName": {
                remote: "用户已经存在"
            },
            "phonenumber":{
                remote: "手机号码已经存在"
            }
        },
        focusCleanup: true
    });

    function submitHandler() {
        var chrtype = [[${#strings.defaultString(@config.getKey('sys.account.chrtype'), 0)}]];
        var password = $("#password").val();
        if ($.validate.form() && checkpwd(chrtype, password)) {
            var data = $("#form-user-add").serializeArray();
            var over_Date= $("#over_date").val();
            var status = $("input[id='u_Status']").is(':checked') == true ? 1 : -1;
            var roleId =  $("#srSelect").val();
            var itId= $("#institutionSelect").val();
            data.push({"name": "uStatus", "value": status});
            data.push({"name": "overDate", "value": over_Date});
            data.push({"name": "srId", "value": roleId});
            data.push({"name": "itId", "value": itId})
            $.operate.save(prefix + "/add", data);
        }
    }



    function doSubmit(index, layero){
        var tree = layero.find("iframe")[0].contentWindow.$._tree;
        var body = layer.getChildFrame('body', index);
        $("#treeId").val(body.find('#treeId').val());
        $("#treeName").val(body.find('#treeName').val());
        layer.close(index);
    }

    $(function() {
        $("#institution").hide()
        $("select[id='srSelect']").on("click",function () {
            if($("#srSelect").val()==2) {
                console.log(2)
                $("#institution").stop().show()
            }else{
                console.log(1)
                $("#institution").stop().hide()
            }
        })
    });
</script>
</body>
</html>